<template >
    <div class="box">
        <div class="manage-left">
            <div class="manage-left-top">模型分类</div>
            <div class="manage-left-tree">
              <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
                <el-tab-pane label="实体模型" name="first">
                  <el-tree
                    :data="data"
                    node-key="id"
                    default-expand-all
                    @node-contextmenu="rightClick"
                    @node-drag-start="handleDragStart"
                    @node-drag-enter="handleDragEnter"
                    @node-drag-leave="handleDragLeave"
                    @node-drag-over="handleDragOver"
                    @node-drag-end="handleDragEnd"
                    @node-drop="handleDrop"
                    draggable
                    :allow-drop="allowDrop"
                    :allow-drag="allowDrag">
                </el-tree>
                </el-tab-pane>
                <el-tab-pane label="关系模型" name="second">
                  <el-tree
                    :data="data"
                    node-key="id"
                    default-expand-all
                    @node-contextmenu="rightClick"
                    @node-drag-start="handleDragStart"
                    @node-drag-enter="handleDragEnter"
                    @node-drag-leave="handleDragLeave"
                    @node-drag-over="handleDragOver"
                    @node-drag-end="handleDragEnd"
                    @node-drop="handleDrop"
                    draggable
                    :allow-drop="allowDrop"
                    :allow-drag="allowDrag">
                </el-tree>
                </el-tab-pane>
              </el-tabs>
                
            </div>
            <div v-show="menuVisible">
              <ul id="menu" class="menu">
                <li class="menu__item" @click="isAddCardPing = true">平级添加</li>
                <li class="menu__item" @click="addCard">下级添加</li>
                <li class="menu__item" @click="deleteCard">删除</li>
              </ul>
            </div>

        </div>
        <div class="manage-right">
            <div class="manage-right-top">
              <div class="manage-right-top-sou">
                  <el-input size="mini" id="input" v-model="input" clearable placeholder="请输入内容" style="width:500px;"></el-input>
                  <div>
                    <el-button size="mini" type="primary" icon="el-icon-search" style="margin-left:10px;" @click="sosuo">搜索</el-button>
                  </div>
              </div>
              <div class="block">
                <el-date-picker
                  size="mini" v-model="value"
                  type="datetime"
                  style="width:190px;"
                  placeholder="选择日期时间">
                </el-date-picker>
                -
                <el-date-picker
                  size="mini" v-model="value1"
                  type="datetime"
                  style="width:190px;"
                  placeholder="选择日期时间">
                </el-date-picker>
              </div>
              <!-- <div class="xia">
                <el-select id="xiala" size="mini" v-model="region" clearable allow-create filterable placeholder="请选择用户名"
                          style="width:250px;">
                  <el-option v-for='(item,index) in user' :key="index" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </div> -->
            </div>
            <div class="zhuzhuang" >
              <div id="main" style="width: 100%;height:250px;" ref="zhu"></div>
            </div>
             <div class="form">
                <el-table
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="商品名称">
                            <span>{{ props.row.name }}</span>
                          </el-form-item>
                          <el-form-item label="所属店铺">
                            <span>{{ props.row.shop }}</span>
                          </el-form-item>
                          <el-form-item label="商品 ID">
                            <span>{{ props.row.id }}</span>
                          </el-form-item>
                          <el-form-item label="店铺 ID">
                            <span>{{ props.row.shopId }}</span>
                          </el-form-item>
                          <el-form-item label="商品分类">
                            <span>{{ props.row.category }}</span>
                          </el-form-item>
                          <el-form-item label="店铺地址">
                            <span>{{ props.row.address }}</span>
                          </el-form-item>
                          <el-form-item label="商品描述">
                            <span>{{ props.row.desc }}</span>
                          </el-form-item>
                        </el-form>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="商品 ID"
                      prop="id">
                    </el-table-column>
                    <el-table-column
                      label="商品名称"
                      prop="name">
                    </el-table-column>
                    <el-table-column
                      label="描述"
                      prop="desc">
                    </el-table-column>
                  </el-table>
              </div>
              <div class="form-footer" >
                <el-pagination
                  background
                  layout="prev, pager, next"
                  @current-change="current_change"
                  :current-page='1'
                  :page-size="10"
                  :total="111">
                </el-pagination>
              </div>

        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";

    @Component
    export default class LogList extends Vue {
        private data:any =[{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 8,
              label: '三级 1-1-1'
            }, {
              id: 9,
              label: '三级 1-1-2'
            }]
          },{
            id: 5,
            label: '二级 1-1',
            children: [{
              id: 10,
              label: '三级 1-1-1'
            }, {
              id: 11,
              label: '三级 1-1-2'
            }]
          },{
            id: 6,
            label: '二级 1-1',
            children: [{
              id: 12,
              label: '三级 1-1-1'
            }, {
              id: 13,
              label: '三级 1-1-2'
            }]
          },{
            id: 7,
            label: '二级 1-1',
            children: [{
              id: 14,
              label: '三级 1-1-1'
            }, {
              id: 15,
              label: '三级 1-1-2'
            }]
          }]
        }]
        private activeName :any = 'first'
        private  defaultProps: object = {
          children: 'children',
          label: 'label'
        }
        private sum :any=['10','20','30','40','10','20','30','40','10','20','30','40','10','20','30','40'] 
        private time :any=['10','20','30','40','10','20','30','40','10','20','30','40','10','20','30','40']
        private input :null|string =null;
        //時間 
        private value :null|string =null
        private value1 :null|string =null
        // 加載
        private loading :boolean =false
        //form
        private tableData :any =  [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
         private menuVisible :boolean=false
         
        //  树的操作\
        public mounted() {
           this.$nextTick(():void=>{
             this.main()
           })
        }
        
        public handleDragStart(node :any, ev:any):any {
        console.log('drag start', node);
        }
        public handleDragEnter(draggingNode:any, dropNode:any, e:any):any {
            console.log('tree drag enter: ', dropNode.label);
        }
        public handleDragLeave(draggingNode:any, dropNode:any, ev:any):any {
            console.log('tree drag leave: ', dropNode.label);
        }
        public handleDragOver(draggingNode:any, dropNode:any, ev:any):any {
            console.log('tree drag over: ', dropNode.label);
        }
        public handleDragEnd(draggingNode:any, dropNode:any, dropType:any, ev:any):any {
            console.log('tree drag end: ', dropNode && dropNode.label, dropType);
        }
        public handleDrop(draggingNode:any, dropNode:any, dropType:any, ev:any):any {
            console.log('tree drop: ', dropNode.label, dropType);
        }
        public allowDrop(draggingNode:any, dropNode:any, type:any):boolean {
            if (dropNode.data.label === '二级 3-1') {
            return type !== 'inner';
            } else {
            return true;
            }
        }
        public allowDrag(draggingNode:any):boolean {
            return draggingNode.data.label.indexOf('三级 3-2-2') === -1;
        }

        //tab事件
        public handleClick(tab:string, event:any) {
        console.log(tab, event);
        }

        //右击菜单

        public rightClick(MouseEvent:any, object:any, Node:any, element:any):any { // 鼠标右击触发事件
          this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
          this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
          var menu:any = document.querySelector('#menu') 
          menu.style.left = MouseEvent.clientX - 190 + 'px'
          document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
          menu.style.top = MouseEvent.clientY - 80 + 'px'
          // console.log('右键被点击的event:', MouseEvent)
          // console.log('右键被点击的object:', object)
          // console.log('右键被点击的value:', Node)
          // console.log('右键被点击的element:', element)
          // console.log('鼠标点击了树形结构图')
        }
        public foo() { // 取消鼠标监听事件 菜单栏
            this.menuVisible = false
            document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
          }
        //菜单事件
        public isAddCardPing(){}
        public addCard(){}
        public deleteCard(){}
        //搜索
        public sosuo(){

        }
        //
        public current_change (currentPage:number) {
        // this.currentPage = currentPage - 1
        // this.getmanagement1()
        }
        
        //柱状图
        public main () {
        var $this:any = this
        let myChart:any = this.$echarts.init(document.getElementById('main'))
        let option:any = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '20%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: $this.time,

              axisTick: {
                alignWithLabel: true
              }
            }
          ],

          yAxis: [
            {
              // type : 'category',
              // data : ['10','20','30','40'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          dataZoom: [{
            type: 'slider',
            xAxisIndex: 0,
            filterMode: 'empty',
            start: 0,
            end: 100,
            height: 20
          }],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '40%',
              data: $this.sum,
              // itemStyle: {
              //     color: '#D84C29'
              //   }
            }
          ],
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: '{c}'
            }
          },
          itemStyle: {
            normal: {
              color: [
                {
                  offset: 0,
                  color: 'rgba(17, 168,171, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(17, 168,171, 0.1)'
                }
              ],
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          }
        }
        myChart.setOption(option, true)
        // myChart.on('click', params => {
        //   this.currentPage=0
        //   this.startUnix(this.setTime(params.name))
        // })
      }
        

    }
</script>
<style lang="scss">
    .box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
        .manage-left {
        width: 15%;
        height: 100%;
            .manage-left-top{
                width:100%;
                height:5%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom:  2px;
                background-color: #fff;
            }
            .manage-left-tree{
                width:100%;
                height:95%;
                background-color: #fff;
            }
            .menu__item {
                display: block;
                line-height: 20px;
                text-align: center;
                padding: 6px 0;
                cursor: pointer;
                
              }
                .menu {
                width: 110px;
                position: absolute;
                border-radius: 10px;
                box-shadow:0 0 2px  #999999;
                background-color: #fff;
                z-index: 999;
                padding: 10px 0;
                margin: 0px;
              }
              li:hover {
                background-color: #1790ff;
                color: white;
              }
        }
        .manage-right {
        width: 84%;
        height: 100%;
        background-color: #fff;
        padding:5px;
            .manage-right-top{
              width: 100%;
              height: 4%;
              display: flex;
                .manage-right-top-sou{
                  display: flex;
                  justify-content: space-between;
                  width: 45%;
                }
            }
            .block {
              margin-left: 30px;
            }
            .form{
                 

                .demo-table-expand {
                  font-size: 0;
                }
                .demo-table-expand label {
                  width: 90px;
                  color: #99a9bf;
                }
                .demo-table-expand .el-form-item {
                  margin-right: 0;
                  margin-bottom: 0;
                  width: 50%;
                }
            }
        }


    }
  
</style>
